<template>
  <label class="ly-radio-button" @click="updateValue" :class="{
      'is-checked':model===label,
      'is-disabled':disabled
      }">
    <span class="ly-radio-button__inner">
    	<slot></slot>
    	<template v-if="!$slots.default">{{label}}</template>
    </span>
  </label>
</template>
<script>
export default {
  name: "lyRadioButton",
  props: {
    value: {},
    label: {},
    disabled: {
      type: Boolean,
      default: false
    }
  },
  computed:{
	isGroup() {
        let parent = this.$parent;
        while (parent) {
          if (parent.$options._componentTag!=='ly-radio-group') {
            parent = parent.$parent;
          } else {
            this._radioGroup = parent;
            return true;
          }
        }
        return false;
    },
    model(){
    	return this.isGroup ? this._radioGroup.value : this.value;
    }
  },
  methods: {
    updateValue() {
      if (this.disabled) {
        return;
      }
      if (this.model !== this.label) {
        this.$emit("change", this.label);
        this.isGroup && this.$parent.onGroupChange(this.label);
      }
      this.$emit("input", this.label);
    }
  },
  created() {
  }
};
</script>
<style lang="scss">
.ly-radio-button {
	cursor: pointer;
	display: inline-block;
	user-select: none;
	position: relative;
	outline: none;
	.ly-radio-button__inner {
		line-height: 1;
		white-space: nowrap;
		vertical-align: middle;
		background: #fff;
		border: 1px solid #dcdfe6;
		border-right: 0;
		color: #606266;
		-webkit-appearance: none;
		text-align: center;
		box-sizing: border-box;
		margin: 0;
		cursor: pointer;
		transition: all .3s cubic-bezier(.645, .045, .355, 1);
		padding: 8px 20px;
		font-size: 14px;
		border-radius: 0;
		position: relative;
		display: inline-block;
		outline: none;
	}
	&:first-child .ly-radio-button__inner {
		border-radius: 4px 0 0 4px;
		box-shadow: none!important;
	}
	&:last-child .ly-radio-button__inner {
		border-radius: 0 4px 4px 0;
		border-right: 1px solid #dcdfe6;
	}
	&:hover {
		&+.ly-radio-button .ly-radio-button__inner {
			border-left-color: #C8CEFF;
		}
		.ly-radio-button__inner {
			color: #6575F6;
			background-color: #ffffff;
			border-color: #C8CEFF;
		}
	}
	&.is-checked {
		.ly-radio-button__inner {
			color: #fff;
			background-color: #6575F6;
			border-color: #6575F6;
		}
	}
	&.is-disabled {
		.rx-radio-button__inner {
			color: #c0c4cc;
			cursor: not-allowed;
			background-image: none;
			background-color: #fff;
			border-color: #ebeef5;
		}
		&.is-checked {
			.rx-radio-button__inner {
				color: #c0c4cc;
				cursor: not-allowed;
				background-image: none;
				background-color: #f2f6fc;
				border-color: #ebeef5;
			}
		}
	}
}

</style>
